<%- include("./layouts/header.ejs")%>

  <div class="main">
    <%- include("./layouts/navBar.ejs")%>
    <div class="container-fluid">
      <div class="page-title">
        <h1>写文章</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <form class="row" id="myForm">
        <div class="col-md-9">
          <div class="form-group">
            <label for="title">标题</label>
            <input id="title" class="form-control input-lg" name="title" type="text" placeholder="文章标题">
          </div>
          <div class="form-group">
            <label for="content">内容</label>
            <textarea id="content" class="form-control input-lg" name="content" cols="30" rows="10" placeholder="内容"></textarea>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/post/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="feature">特色图像</label>
            <!-- show when image chose -->
            <img class="help-block thumbnail" style="display: none">
            <input id="feature" class="form-control" name="feature" type="file">
          </div>
          <div class="form-group">
            <label for="category">所属分类</label>
            <select id="category" class="form-control" name="category">
              <!-- <option value="1">未分类</option>
              <option value="2">潮生活</option> -->
              <% categories.forEach(item=>{%>
                <option value="<%= item.id%>">
                  <%= item.name%>
                </option>
              <%})%>
            </select>
          </div>
          <div class="form-group">
            <label for="created">发布时间</label>
            <input id="created" class="form-control" name="created" type="datetime-local">
          </div>
          <div class="form-group">
            <label for="status">状态</label>
            <select id="status" class="form-control" name="status">
              <option value="drafted">草稿</option>
              <option value="published">已发布</option>
            </select>
          </div>
          <div class="form-group">
            <!-- <button class="btn btn-primary" type="submit">保存</button> -->
            <span class="btn btn-primary" id="btnAdd">添加</span>
          </div>
        </div>
      </form>
    </div>
  </div>

  <%- include("./layouts/aside.ejs")%>

<%- include("./layouts/footer.ejs")%>
<script>
  //1.上传图片
  $("#feature").on("change",function(){
    //创建FormDate对象获取图片数据
    var data = new FormData() // 可获取二进制数据
    data.append("feature",this.files[0]);// this.files是要上传的文件列表,是一个数组,需要使用索引的方式来获取上传的图片
    console.log(this.files)
    //2.发送异步ajax请求
    $.ajax({
      type:"post",
      url:"/uploadFileOfPost",
      data: data, // 图片数据
      contentType: false,  // 不要进行默认的编码 application/x-www-form-urlencoded
      processData: false, // 不要底层转换成字符串
      dataType: "json",
      success: function(res){
        if(res&&res.code==0){
          // 将上传的图片显示出来, 还要存在隐藏域中,以备添加文章是使用
          $(".thumbnail").show().attr("src",res.src).after("<input type='hidden' value='" + res.src + "' name='feature'>")
        }
      }
    })
  })

  //添加文章
  //2.1 给添加按钮注册事件
  $("#btnAdd").on("click",function(){
    //2.2 发送异步ajax请求
    $.ajax({
      type: 'post',
      url: '/addNewPost',
      data: $('#myForm').serialize(), // 表单序列化获取所有input标签name属性的值
      dataType: 'json',
      success: function (res) {
        if (res && res.code == 0) {
          // 跳转到所有文章页面
          location.href = '/posts'
        }
      }
    })
  })
</script>
